import React, { Component } from 'react';
import {
    View,
    Text,
    Image,
    TextInput,
    TouchableOpacity,
    StyleSheet,
    SafeAreaView,
    Modal,
    ScrollView,
    DeviceEventEmitter,
    FlatList,
    ActivityIndicator
} from 'react-native';
import LinearGradient from 'react-native-linear-gradient';
import Constant from '../../utils/Constant'//全局变量
import HttpUtils from "../../utils/HttpUtils";
import HttpUrls from "../../utils/HttpUrls";
import Header from "../../components/header";
import RechargePop from './RechargePop';
import CommonAlertView from "../common/CommonAlertView";



let navigation = null

export default class FundAccountPage extends Component {
    constructor(props) {
        super(props);
        this.state = {
            totalAmount: '',
            totalDepositAmount: '',
            showRechargePop: false,
            showAlertView: false,
        };
    }

    componentWillMount() {
        this.paySuccess = DeviceEventEmitter.addListener('paySuccess', e => {
            this.getWalletInfo()
        });
    }

    componentWillUnmount() {
        if (this.paySuccess) {
            this.paySuccess.remove();
        }
        // 移除事件监听
        // this._unsubscribe();
    }

    componentDidMount() {
        // this._unsubscribe = this.props.navigation.addListener('focus', () => {
        //     this.getWalletInfo()
        // });

        this.getWalletInfo()
    }

    getWalletInfo() {
        HttpUtils.getRequest(HttpUrls.merchantAccountDetail, { merchantId: Constant.userInfo.merchantId })
            .then((result) => {
                let code = result.code
                if (code == 0) {
                    let data = result.data
                    this.setState({
                        totalAmount: data.totalAmount ? parseFloat(data.totalAmount) : 0,
                        totalDepositAmount: data.depositAccount && data.depositAccount.totalAmount ? parseFloat(data.depositAccount.totalAmount) : 0,
                    })
                }
            })
            .catch((error) => {

            });
    }

    render() {
        navigation = this.props.navigation
        return (
            <View style={styles.container}>
                {/* 顶部导航栏 */}
                <Image style={styles.imgBg} source={require('source/image/fund_account_bg.png')} />
                <View style={styles.layoutContain}>
                    <View style={styles.layoutContain2}>
                        <Header navigation={navigation} Title={'账户管理'} hideSepLine={true} bgColor={'rgba(0,0,0,0)'} ></Header>

                        <ScrollView>
                            {this.renderMoneyDetail()}
                            {this.renderFunctionBox()}
                        </ScrollView>

                        {
                            this.state.showRechargePop ?
                                <RechargePop
                                    accountType={1}
                                    visible={this.state.showRechargePop}
                                    navigation={navigation}
                                    onClose={() => {
                                        this.setState({
                                            showRechargePop: false,
                                        })
                                    }}
                                />
                                :
                                null
                        }

                        {
                            this.state.showAlertView ?
                                <CommonAlertView
                                    title={'暂不支持自动充值，请联系客服进行充值'}
                                    sureDes={'好的'}
                                    sureAction={() => {
                                        this.setState({
                                            showAlertView: false,
                                        }, function () {
                                            navigation.navigate('ContactUs')
                                        })
                                    }}
                                />
                                : null
                        }


                    </View>
                </View>

            </View>
        );
    }

    renderMoneyDetail() {
        return (
            <View style={styles.moneyDetailContain}>

                <Text style={{ width: '100%', textAlign: 'center', fontSize: 15, color: '#999999', marginTop: 24 }}>我的余额（元）</Text>

                <Text style={{ width: '100%', textAlign: 'center', fontSize: 34, color: '#333333', marginTop: 8, fontWeight: 'bold' }}>{(this.state.totalAmount / 100).toFixed(2)}</Text>

                <TouchableOpacity
                    activeOpacity={0.8}
                    onPress={() => {
                        this.setState({
                            showRechargePop: true,
                        })
                        // this.setState({
                        //     showAlertView: true,
                        // })

                    }}
                    style={{ marginTop: 16, marginBottom: 16 }}
                >
                    <LinearGradient start={{ x: 0, y: 0 }} end={{ x: 1, y: 0 }}
                        colors={['#FFEF3A', '#FFDB1B']}
                        style={styles.rechargeBox}>
                        <Text style={styles.rechargeText}>充值</Text>

                    </LinearGradient>
                </TouchableOpacity>

            </View>
        )
    }

    renderFunctionBox() {
        return (
            <View style={[styles.moneyDetailContain, { marginTop: 10 }]}>
                <TouchableOpacity
                    style={styles.itemBox}
                    activeOpacity={0.8}
                    onPress={() => {
                        navigation.navigate('WalletHistoryPage')
                    }}
                >
                    <Text style={styles.titleText}>费用明细</Text>
                    <Image style={styles.arrowImg} source={require('source/image/comm/icon_tree_arrow.png')} />
                </TouchableOpacity>
                <TouchableOpacity
                    style={styles.itemBox}
                    activeOpacity={0.8}
                    onPress={() => {
                        navigation.navigate('BondAccountPage')
                    }}
                >
                    <Text style={styles.titleText}>保证金账户</Text>
                    <View style={{ flexDirection: 'row', alignItems: 'center' }}>
                        <Text style={styles.titleText}>{(this.state.totalDepositAmount / 100).toFixed(2)}</Text>
                        <Image style={styles.arrowImg} source={require('source/image/comm/icon_tree_arrow.png')} />
                    </View>
                </TouchableOpacity>
                <TouchableOpacity
                    style={styles.itemBox}
                    activeOpacity={0.8}
                    onPress={() => {
                        navigation.navigate('BankCardManagerPage')
                    }}
                >
                    <Text style={styles.titleText}>银行卡管理</Text>
                    <Image style={styles.arrowImg} source={require('source/image/comm/icon_tree_arrow.png')} />
                </TouchableOpacity>
                <TouchableOpacity
                    style={[styles.itemBox, { borderBottomWidth: 0 }]}
                    activeOpacity={0.8}
                    onPress={() => {
                        navigation.navigate('SignSettingsPage')
                    }}
                >
                    <Text style={styles.titleText}>合同授权管理</Text>
                    <Image style={styles.arrowImg} source={require('source/image/comm/icon_tree_arrow.png')} />
                </TouchableOpacity>
            </View>
        )
    }

}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#f5f5f5',
    },
    imgBg: {
        width: '100%',
        height: 216,
        resizeMode: 'cover',
    },
    layoutContain: {
        position: 'absolute',
        top: 0,
        bottom: 0,
        left: 0,
        right: 0,
    },
    layoutContain2: {
        width: '100%',
        height: '100%',
        flexDirection: 'column'
    },
    moneyDetailContain: {
        marginLeft: 8,
        marginRight: 8,
        paddingHorizontal: 16,
        backgroundColor: '#ffffff',
        borderRadius: 12,
        marginTop: 28,
        alignItems: 'center',
    },
    rechargeBox: {
        width: 143,
        height: 36,
        justifyContent: 'center',
        alignItems: 'center',
        borderRadius: 18,
    },
    rechargeText: {
        fontSize: 14,
        color: '#333333',
    },
    itemBox: {
        flexDirection: 'row',
        justifyContent: 'space-between',
        alignItems: 'center',
        width: '100%',
        height: 46,
        borderBottomColor: '#e4e4e4',
        borderBottomWidth: 0.3
    },
    titleText: {
        fontSize: 14,
        color: '#333333',
    },
    arrowImg: {
        marginLeft: 5,
        width: 15,
        height: 15
    }
})